import * as echarts from 'echarts'

const xAxisConfig = {
    nameLocation: 'start',
    nameTextStyle: {
        color: '#333',
        fontSize: 12,
        padding: [30, 5, 0, 0],
        align: 'right',
    },
    // type: 'category',
    boundaryGap: true,
    axisLine: {
        //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
            color: 'rgba(0, 0, 0, 0.4)',
        },
    },
    axisLabel: {
        //坐标轴刻度标签的相关设置
        // textStyle: {
        color: '#999',
        padding: 2,
        fontSize: 12,
        // },
    },
    splitLine: {
        show: false,
    },
}
const yAxisConfig = {
    nameTextStyle: {
        color: '#333',
        fontSize: 14,
        padding: 0,
        align: 'right',
    },
    min: 0,
    splitLine: {
        show: true,
        lineStyle: {
            color: 'rgba(0,0,0, 0.1)',
        },
    },
    axisLine: {
        show: false,
    },
    axisLabel: {
        show: true,
        // textStyle: {
        color: '#999',
        padding: 0,
        // },
    },
    axisTick: {
        show: false,
    },
}
export function renderBar(
    elemId,
    {
        xData,
        yData,
        yName,
        yMax = 'dataMax',
        colorList = ['var(--el-color-primary)'],
        barWidth,
    }
) {
    // 基于准备好的dom，初始化echarts实例
    const chart = echarts.init(document.getElementById(elemId))
    const xAxis = Object.assign(xAxisConfig, {
        // name: xName,
        data: xData,
    })
    const yAxis = Object.assign(yAxisConfig, {
        max: yMax,
    })
    const option = {
        color: colorList,
        grid: {
            top: 60,
            left: 60,
            right: 40,
            bottom: 40,
            // containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            // formatter(param){
            //     return `${param[0].value}`
            // }
        },
        xAxis: [xAxis],
        yAxis: [yAxis],
        series: [
            {
                name: yName,
                type: 'bar',
                barWidth: barWidth || '30',
                tooltip: {
                    show: true,
                },
                data: yData,
            },
        ],
    }
    // 绘制图表
    chart.setOption(option)
}

export function renderSingleBar(
    elem,
    {
        xData,
        yData,
        yName,
        yMax = 'dataMax',
        // unit,
        colorList = ['var(--el-color-primary)'],
        barWidth,
    }
) {
    // 基于准备好的dom，初始化echarts实例
    const chart = echarts.init(elem)
    const option = {
        color: colorList,
        grid: {
            top: 0,
            left: 10,
            right: 10,
            bottom: 0,
        },
        tooltip: {
            trigger: 'axis',
            // formatter(param){
            //     return `${param[0].value}`
            // }
        },
        xAxis: { show: false, data: xData, boundaryGap: false },
        yAxis: { show: false, max: yMax },
        series: [
            {
                name: yName,
                type: 'bar',
                barWidth: barWidth || '10',
                tooltip: {
                    show: true,
                },
                data: yData,
                itemStyle: {
                    // 设置柱状渐变色
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                        {
                            offset: 0,
                            color: 'rgba(122,109,227,0.8)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(122,109,227,0.2)',
                        },
                    ]),
                },
            },
        ],
    }
    // 绘制图表
    chart.setOption(option)
}

/*
 * dataList数组元素格式
 * color 颜色值 #fff
 * itemColor 渐变颜色值数组 ['#fff','#000']
 * name 名称
 * valueList 数值列表与xData数组长度一致
 **/
export function renderLine(
    elem,
    dataList,
    {
        xData,
        xName,
        yName,
        yMax = 'dataMax',
        unit,
        symbolSize = 4,
        smooth = true,
        showLegend = false,
    }
) {
    // 基于准备好的dom，初始化echarts实例
    const chart = echarts.init(elem)
    const series = []
    const optionColor = []
    dataList.forEach((item) => {
        const lineColor = item.color || '#7a6de3'
        const itemColor = item.itemColor || [
            'rgba(122,109,227,0.8)',
            'rgba(122,109,227,0.2)',
        ]
        optionColor.push(lineColor)
        series.push({
            name: item.name,
            type: 'line',
            symbolSize: symbolSize,
            smooth: smooth,
            lineStyle: {
                width: 1,
                color: lineColor, // 线条颜色
                type: 'solid',
                // borderColor: 'rgba(0,0,0,.4)',
            },
            tooltip: {
                show: true,
            },
            label: {
                show: false,
            },
            areaStyle: {
                //区域填充样式
                // normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                        {
                            offset: 0,
                            color: itemColor[0],
                        },
                        {
                            offset: 1,
                            color: itemColor[1],
                        },
                    ],
                    false
                ),
                // },
            },
            data: item.valueList,
        })
    })

    const xAxis = Object.assign(xAxisConfig, {
        name: xName || '时间',
        data: xData,
        boundaryGap: false,
    })
    const yAxis = Object.assign(yAxisConfig, {
        name: unit ? `${yName}(${unit})` : yName,
        max: yMax || 'auto',
    })
    const option = {
        color: optionColor,
        grid: {
            top: '15%',
            left: 45,
            right: 10,
            bottom: showLegend ? 80 : 40,
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis',
            // formatter(param){
            //     return `${param[0].value}`
            // }
        },

        legend: {
            show: showLegend,
            icon: 'roundRect',
            bottom: '20',
            selectedMode: true,
            textStyle: {
                color: '#fff',
                fontSize: 14,
                padding: [0, 8, 0, 8],
            },
        },
        xAxis: [xAxis],
        yAxis: [yAxis],
        series: series,
    }
    // 绘制图表
    chart.setOption(option)
}

/*
 * dataList数组元素格式
 * color 颜色值 #fff
 * itemColor 渐变颜色值数组 ['#fff','#000']
 * name 名称
 * valueList 数值列表与xData数组长度一致
 **/
export function renderSingleLine(
    elem,
    { xData, yData, yName, yMax = 'dataMax' }
) {
    // 基于准备好的dom，初始化echarts实例
    const chart = echarts.init(elem)
    const lineColor = '#7a6de3'
    const itemColor = ['rgba(122,109,227,0.8)', 'rgba(122,109,227,0.2)']
    const series = [
        {
            name: yName,
            type: 'line',
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                width: 1,
                color: lineColor, // 线条颜色
                type: 'solid',
            },
            tooltip: {
                show: true,
            },
            label: {
                show: false,
            },
            areaStyle: {
                //区域填充样式
                // normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                        {
                            offset: 0,
                            color: itemColor[0],
                        },
                        {
                            offset: 1,
                            color: itemColor[1],
                        },
                    ],
                    false
                ),
                // },
            },
            data: yData,
        },
    ]

    const xAxis = {
        show: false,
        data: xData,
        boundaryGap: false,
    }
    const yAxis = {
        show: false,
        max: yMax,
    }
    const option = {
        color: [lineColor],
        grid: {
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
        },
        tooltip: {
            trigger: 'axis',
            // formatter(param){
            //     return `${param[0].value}`
            // }
        },

        legend: {
            show: false,
        },
        xAxis: [xAxis],
        yAxis: [yAxis],
        series: series,
    }
    // 绘制图表
    chart.setOption(option)
}
function formatNum(number) {
    return +number.toFixed(1)
}
export function renderStateGauge(elemId, { value, max, unit }) {
    const chart = echarts.init(document.getElementById(elemId))
    const divider = [
        max * 0,
        formatNum(max * 0.2),
        max * 0.5,
        formatNum(max * 0.8),
        max,
    ]
    let highlight = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
            offset: 1,
            color: '#fe1440', // 0% 处的颜色
        },
        {
            offset: 0.9,
            color: '#fd9d35', // 100% 处的颜色
        },
        {
            offset: 0.17,
            color: '#b6fd62', // 100% 处的颜色
        },
        {
            offset: 0,
            color: '#09fe44', // 100% 处的颜色
        },
    ])
    const startAngle = 200
    const endAngle = -20
    const center = ['50%', '68%']
    const option = {
        backgroundColor: '#fff',
        grid: {
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
        },
        tooltip: {
            show: false,
        },
        series: [
            {
                name: '内部进度条',
                type: 'gauge',
                radius: '80%',
                center: center,
                min: 0,
                max: max,
                startAngle: startAngle,
                endAngle: endAngle,
                splitNumber: 10,
                axisLine: {
                    lineStyle: {
                        color: [[1, highlight]],
                        width: 10,
                    },
                },
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                itemStyle: {
                    show: false,
                },
                detail: {
                    show: false,
                    formatter: function () {
                        return 'CPU'
                    },
                    offsetCenter: [0, 60],
                    textStyle: {
                        padding: [0, 0, 0, 0],
                        fontSize: 20,
                        fontWeight: '500',
                        color: '#324063',
                    },
                },
                animation: false, //动画
                title: {
                    //标题
                    show: false,
                    offsetCenter: [0, 20], // x, y，单位px
                    textStyle: {
                        color: '#59ab82',
                        fontSize: 20, //表盘上的标题文字大小
                        fontWeight: 400,
                        fontFamily: 'PingFangSC',
                    },
                },
                data: [
                    {
                        name: value,
                        value: value,
                    },
                ],
                pointer: {
                    show: true,
                    length: '80%',
                    width: 7, //指针粗细
                    itemStyle: {
                        color: '#67c23a',
                    },
                },

                markPoint: {
                    // 仪表盘指针圆
                    animation: false,
                    silent: true,
                    data: [
                        {
                            x: center[0],
                            y: center[1],
                            symbol: 'circle',
                            symbolSize: 28,
                            itemStyle: {
                                color: '#fff',
                                shadowColor: 'rgba(0, 0, 0, 0.4)',
                                shadowBlur: 20,
                            },
                        },
                        {
                            x: center[0],
                            y: center[1],
                            symbol: 'circle',
                            symbolSize: 18,
                            itemStyle: {
                                color: '#67c23a',
                            },
                        },
                    ],
                },
                animationDuration: 4000,
            },
            {
                name: '外部刻度',
                type: 'gauge',
                radius: '110%',
                center: center,
                min: 0,
                max: max,
                splitNumber: 10, //刻度数量
                startAngle: startAngle,
                endAngle: endAngle,
                axisLine: {
                    show: false,
                }, //仪表盘轴线
                axisLabel: {
                    show: true,
                    distance: -10,
                    formatter: function (v) {
                        const numbers = divider
                        if (numbers.indexOf(v) >= 0) {
                            if (v <= divider[1]) {
                                return `{a|${v}${unit}}`
                            } else if (v == divider[2]) {
                                return `{b|${v}${unit}}`
                            } else {
                                return `{c|${v}${unit}}`
                            }
                        }
                    },
                    rich: {
                        a: {
                            color: 'green',
                            lineHeight: 10,
                            fontSize: 10,
                        },

                        b: {
                            color: 'black',
                            lineHeight: 10,
                            fontSize: 10,
                            height: 25,
                            verticalAlign: 'top',
                        },

                        c: {
                            color: 'black',
                            lineHeight: 10,
                            fontSize: 10,
                        },
                    },
                }, //刻度标签。
                splitLine: {
                    show: true,
                    length: -10,
                    lineStyle: {
                        color: '#333',
                        width: 1,
                    },
                }, //分隔线样式
                axisTick: {
                    show: true,
                    splitNumber: 5,
                    lineStyle: {
                        color: '#333',
                        width: 1,
                        opacity: 0.5,
                    },
                    length: -5,
                }, //刻度样式
                detail: {
                    show: false,
                },
                pointer: {
                    show: false,
                },
            },
        ],
    }
    // 绘制图表
    chart.setOption(option)
}

export function renderCPULine(
    elem,
    dataList,
    {
        xData,
        xName,
        yName,
        yMax = 'dataMax',
        unit,
        symbolSize = 4,
        smooth = true,
        showLegend = true,
    }
) {
    // 基于准备好的dom，初始化echarts实例
    const chart = echarts.init(elem)
    const series = []
    const optionColor = []
    dataList.forEach((item) => {
        const lineColor = item.color || '#7a6de3'
        const itemColor = item.itemColor || [
            'rgba(122,109,227,0.8)',
            'rgba(122,109,227,0.2)',
        ]
        optionColor.push(lineColor)
        series.push({
            name: item.name,
            type: 'line',
            symbolSize: symbolSize,
            smooth: smooth,
            lineStyle: {
                width: 1,
                color: lineColor, // 线条颜色
                type: 'solid',
                // borderColor: 'rgba(0,0,0,.4)',
            },
            tooltip: {
                show: true,
            },
            label: {
                show: false,
            },
            areaStyle: {
                //区域填充样式
                // normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                        {
                            offset: 0,
                            color: itemColor[0],
                        },
                        {
                            offset: 1,
                            color: itemColor[1],
                        },
                    ],
                    false
                ),
                // },
            },
            data: item.valueList,
        })
    })

    const xAxis = Object.assign(xAxisConfig, {
        name: xName,
        data: xData,
        boundaryGap: false,
    })
    const yAxis = Object.assign(yAxisConfig, {
        name: unit ? `${yName}(${unit})` : yName,
        max: yMax || 'auto',
        splitNumber: 10,
    })
    const option = {
        color: optionColor,
        grid: {
            top: '15%',
            left: 45,
            right: 10,
            // bottom: showLegend ? 80 : 40,
            containLabel: true,
        },
        tooltip: {
            trigger: 'axis',
            formatter(params) {
                var relVal = params[0].name
                for (var i = 0, l = params.length; i < l; i++) {
                    let unit =
                        params[i].seriesName.indexOf('PU') !== -1 ? '%' : 'G'
                    relVal +=
                        '<br/>' +
                        params[i].marker +
                        params[i].seriesName +
                        ' : ' +
                        params[i].value +
                        unit
                }
                return relVal
            }
        },
        legend: {
            show: showLegend,
            // icon: 'roundRect',
            top: '20',
            left: '0',
            selectedMode: true,
            textStyle: {
                color: '#000',
                fontSize: 14,
                padding: [0, 8, 0, 8],
            },
        },
        xAxis: [xAxis],
        yAxis: [yAxis],
        series: series,
    }
    // 绘制图表
    chart.setOption(option)
}
